<template>
    <div class="layout" @touchmove="barmove" @touchend="barup">
      <div class="bgmask" :style="`background-image:url('${src}')`"></div>
      <!-- 歌曲顶部 -->
      <div class="song-head">
        <div class="close-icon" @click="back">
          <img src="@/assets/img/ui/arrow_down.png" />
        </div>
        <span class="artist-name">{{ artist }}</span>
      </div>
      <!-- 专辑封面 -->
      <div class="album-box">
        <div class="album-img">
          <img v-lazy="src" alt="Loading" />
        </div>
      </div>
      <!-- 播放组件 -->
      <div class="play-box">
        <!-- 歌曲信息 -->
        <div class="song-info">
          <h1>{{ name }}</h1>
          <span>{{ artist }}</span>
        </div>
        <!-- 播放进度区域 -->
        <div class="play-progress" @touchstart="barClick" @touchend="barup">
          <!-- 播放进度条 -->
          <div class="play-bar" ref="thebar">
            <div class="bar-length" :style="`width:${barX}px`"></div>
            <div
              class="bar-point"
              ref="thepoint"
              :style="`left:${barX - 8}px`"
              @touchstart="bardown"
            ></div>
          </div>
          <div class="play-time">
            <span>{{ currentTime }}</span>
            <span>-{{ remainTime }}</span>
          </div>
        </div>
        <!-- 播放控件 -->
        <div class="play-button">
          <!-- 收藏按钮 -->
          <div class="like" @click="like">
            <img
              :src="
                isLike == true
                  ? require('@/assets/img/ui/liked.png')
                  : require('@/assets/img/ui/like.png')
              "
            />
          </div>
          <!-- 切换上一首 -->
          <div class="last">
            <img src="@/assets/img/ui/last.png" />
          </div>
          <!-- 播放与暂停 -->
          <div class="pause" @click="play">
            <img
              :src="
                isPlay == true
                  ? require('@/assets/img/ui/pause.png')
                  : require('@/assets/img/ui/play.png')
              "
            />
          </div>
          <!-- 切换下一首 -->
          <div class="next">
            <img src="@/assets/img/ui/next.png" />
          </div>
          <!-- 音频控件 -->
          <div class="player">
            <audio
              ref="musicBox"
              :src="url"
              @canplay="getTotalTime"
              @timeupdate="getCurrentTime"
              controls
              autoplay
              loop
            ></audio>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "songs",
  data() {
    return {
      songId: "", // 路由传值ID
      name: "", // 歌曲名
      artist: "", // 歌手名
      src: "", // 专辑封面
      url: "", // 音乐URL
      id: "", // 音乐ID
      totalVal: "", // 音乐总值
      currentVal: "", // 音乐当前值
      currentTime: "", // 音乐当前时长
      remainTime: "", // 音乐剩余时长
      timeVal: "", // 可编辑的时间进度
      barX: "", // 进度条位置
      barW: "", // 进度条长度
      isTouch: false, // 判断是否按下
      isLike: false, // 收藏
      isPlay: true, // 播放
    };
  },
  methods: {
    // 获取数据
    getData() {
      // 获取歌曲URL
      axios.get("/song/url", { params: { id: this.songId } }).then((data) => {
        if (data.code == 200) {
          this.url = data.data[0].url;
        }
      });
      // 获取歌曲详情
      axios
        .get("/song/detail", { params: { ids: this.songId } })
        .then((data) => {
          if (data.code == 200) {
            this.name = data.songs[0].name;
            this.id = data.songs[0].id;
            this.artist = data.songs[0].ar[0].name;
            this.src = data.songs[0].al.picUrl;
          }
        });
    },
    // 获取歌曲总时长
    getTotalTime() {
      this.$nextTick(() => {
        if (this.$refs["musicBox"]) {
          this.totalVal = this.$refs["musicBox"].duration;
        }
      });
    },
    // 获取歌曲当前进度
    getCurrentTime() {
      this.$nextTick(() => {
        if (this.$refs["musicBox"]) {
          // 获取当前时长
          this.currentVal = this.$refs["musicBox"].currentTime;
          let m = Math.floor(this.currentVal / 60);
          let s = Math.floor(this.currentVal % 60);
          m = m < 10 ? "0" + m : m;
          s = s < 10 ? "0" + s : s;
          this.currentTime = `${m}:${s}`;
          // 获取剩余时长
          let remainVal = this.totalVal - this.currentVal;
          let m2 = Math.floor(remainVal / 60);
          let s2 = Math.floor(remainVal % 60);
          m2 = m2 < 10 ? "0" + m2 : m2;
          s2 = s2 < 10 ? "0" + s2 : s2;
          this.remainTime = `${m2}:${s2}`;
          // 同步进度条进度
          this.barX = (this.currentVal / this.totalVal) * this.barW;
        }
      });
    },
    // 返回按钮
    back() {
      this.$router.go(-1);
    },
    // 点击进度条
    barClick(event) {
      this.isTouch = true;
      this.barX = event.touches[0].pageX - 25;
      // 获取进度条对应时间
      this.timeVal = (this.barX / this.barW) * this.totalVal;
      this.$nextTick(() => {
        // 显示进度点
        if (this.$refs["thepoint"]) {
          this.$refs["thepoint"].style["opacity"] = 1;
        }
        if (this.$refs["musicBox"]) {
          // 暂停播放
          this.$refs["musicBox"].pause();
          // 改变播放进度
          this.$refs["musicBox"].currentTime = this.timeVal;
        }
      });
    },
    // 按下进度条
    bardown() {
      this.isTouch = true;
      this.$nextTick(() => {
        // 显示进度点
        if (this.$refs["thepoint"]) {
          this.$refs["thepoint"].style["opacity"] = 1;
        }
        // 暂停播放
        if (this.$refs["musicBox"]) {
          this.$refs["musicBox"].pause();
        }
      });
    },
    // 拖动进度条
    barmove(event) {
      if (this.isTouch) {
        // 获取进度条初始位置
        this.barX = event.touches[0].pageX - 25;
        // 限制进度条移动范围
        if (this.barX >= this.barW) {
          this.barX = this.barW;
        } else if (this.barX <= 0) {
          this.barX = 0;
        }
        // 获取进度条对应时间
        this.timeVal = (this.barX / this.barW) * this.totalVal;
        // 拖动进度条改变播放进度
        this.$nextTick(() => {
          if (this.$refs["musicBox"]) {
            this.$refs["musicBox"].currentTime = this.timeVal;
          }
        });
      }
    },
    // 放开进度条
    barup() {
      if (this.isTouch) {
        this.isTouch = false;
        this.$nextTick(() => {
          // 隐藏进度点
          if (this.$refs["thepoint"]) {
            this.$refs["thepoint"].style["opacity"] = 0;
          }
          // 恢复播放
          this.isPlay = true;
          if (this.$refs["musicBox"]) {
            this.$refs["musicBox"].play();
          }
        });
      }
    },
    // 点击收藏
    like() {
      this.isLike = !this.isLike;
    },
    // 播放控件
    play() {
      this.$nextTick(() => {
        if (this.$refs["musicBox"]) {
          if (this.isPlay) {
            // 暂停
            this.isPlay = false;
            this.$refs["musicBox"].pause();
          } else {
            // 播放
            this.isPlay = true;
            this.$refs["musicBox"].play();
          }
        }
      });
    },
  },
  created() {
    // 接收路由传参
    this.songId = this.$route.query.id;
    this.getData();
  },
  mounted() {
    this.$nextTick(() => {
      // 判断进度条元素是否渲染
      if (this.$refs["thebar"]) {
        this.barW = this.$refs["thebar"].offsetWidth;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.layout {
  height: 100%;
  overflow: hidden;
  z-index: 2;
  // 歌曲封面背景遮罩
  .bgmask {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    filter: blur(38px);
    // background-color: lightseagreen;
  }
  // 歌曲顶部
  .song-head {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: end;
    position: relative;
    z-index: 10;
    .close-icon {
      width: 28px;
      height: 28px;
      position: absolute;
      left: 25px;
      bottom: 20px;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 80%;
      }
    }
    .artist-name {
      text-shadow: 0 0 2px black;
      margin-bottom: 20px;
    }
  }
  // 专辑图片
  .album-box {
    width: 100%;
    margin: 10px 0 30px;
    position: relative;
    z-index: 10;
    .album-img {
      width: 320px;
      height: 320px;
      margin: 0 auto;
    box-shadow: 0 0 8px black;
      // background-color: #00ff7f;
      img {
        width: 100%;
      }
    }
  }
  // 播放控件
  .play-box {
    margin: 0 25px;
    padding-bottom: 36px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    .song-info {
      height: 50px;
      text-shadow: 0 0 2px black;
      h1 {
        font-size: 25px;
      }
    }
    // 播放进度区
    .play-progress {
      height: 30px;
      padding-top: 20px;
      // 播放进度条
      .play-bar {
        height: 5px;
        border-radius: 5px;
        position: relative;
        background-color: #fff;
        // 播放拉动条
        .bar-length {
          width: 0px;
          height: 100%;
          border-radius: 50px;
          background-color: #00ff7f;
          position: absolute;
          left: 0;
          top: 0;
        }
        // 播放拉动点
        .bar-point {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: #00ff7f;
          position: absolute;
          left: 0px;
          top: -6px;
          opacity: 0;
          transition-property: opacity;
          transition-duration: 0.3s;
        }
      }
      .play-time {
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
      }
    }
    .play-button {
      height: 80px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // background-color: rgb(217, 255, 0);
      .like {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        // background-color: #00ff7f;
      }
      .last {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        // background-color: blueviolet;
      }
      .pause {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        // background-color: hotpink;
      }
      .next {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        // background-color: blueviolet;
      }
      .player {
        width: 25px;
        height: 25px;
        audio {
          width: 374px;
          height: 50px;
          position: absolute;
          left: -25px;
          bottom: 0;
          display: none;
        }
      }
      div img {
        width: 100%;
      }
    }
  }
}
</style>